<template>
  <div class="ladycdy-icon"> 
    <div class="content">
        <span class="content-title">可点击</span> 
        <rx-button type="default">默认按钮</rx-button>
        <rx-button type="primary">主要按钮</rx-button>
        <rx-button type="danger">危险按钮</rx-button>
        <rx-button type="spec1">次要按钮</rx-button>
        <rx-button type="spec2">次要按钮</rx-button><br>

         <span class="content-title">不可点击</span> 
        <rx-button type="default" disabled>默认按钮</rx-button><br>

        <span class="content-title">朴素按钮</span> 
        <rx-button plain>朴素按钮</rx-button>
        <rx-button type="danger" plain>危险按钮</rx-button>
        <rx-button type="spec1" plain>次要按钮</rx-button>
        <rx-button type="spec2" plain>次要按钮</rx-button><br>

        <span class="content-title">纯图标</span> 
        <rx-button-icon type="spec1" title="导入" name="rx-upload"></rx-button-icon>
        <rx-button-icon type="spec2" title="导出" name="rx-download"></rx-button-icon>
        <rx-button-icon type="danger" title="删除" name="rx-delete"></rx-button-icon>
        <rx-button-icon type="default"  name="rx-edit"  title="编辑"></rx-button-icon><br>

         <span class="content-title">纯图标圆角</span> 
        <rx-button-icon type="danger" plain title="删除" name="rx-delete" :circle="true"></rx-button-icon>
        <rx-button-icon type="default" plain  name="rx-edit"  title="编辑" :circle="true"></rx-button-icon><br>
      </div>
 </div>
 
  
</template>
<script>
export default {
  methods: {}
};
</script>
<style>
.ladycdy-icon .content .rx-btn {
  margin:0 10px 10px 0;
}
.ladycdy-icon .content-title {
  display: inline-block;
  margin:0 10px 10px 0;
  vertical-align: middle;
}
</style>